import React, { useCallback } from 'react'
import { View, Text } from '@tarojs/components'
import style from './ConfirmDialog.module.scss'

interface Props {
  title: string
  content: string
  visible: boolean
  cancelText: string
  confirmText: string
  onCancel: () => void
  onConfirm: () => void
}

const ConfirmDialog: React.FC<Props> = ({
  title, content, visible = false, cancelText = '取消', confirmText = '确定', onCancel, onConfirm
}) => {
  const onClickCancel = useCallback(
    () => {
      onCancel?.()
    },
    [onCancel],
  )

  const onClickConfirm = useCallback(
    () => {
      onConfirm?.()
    },
    [onConfirm],
  )

  return (
    <View className={`${style.mask} ${visible ? style.active : ''}`}>
      <View className={style.container}>
        <Text className={style.titleText}>{title}</Text>
        <Text className={style.contentText}>{content}</Text>

        <View className={style.bottomContainer}>
          <Text onClick={onClickCancel} className={style.cancelText}>{cancelText}</Text>
          <Text onClick={onClickConfirm} className={style.confirmText}>{confirmText}</Text>
        </View>
      </View>
    </View>
  )
}

export default ConfirmDialog
